<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <script src="index.js"></script>
</head>
<body>
    <div class="slider--container">
        <!--图片左按钮-->
        <span class="slider--prev"></span>
        <!--图片右按钮-->
        <span class="slider--next"></span>
        <!--存放图片的容器-->
        <div class="slider--images">
            <img src="./img/a.jpg" alt="">
            <img src="./img/b.jpg" alt="">
            <img src="./img/c.jpg" alt="">
            <img src="./img/d.jpg" alt="">
        </div>
        <!--图片下面的小点点按钮-->
        <div class="slider--pointer">
            <i class="slider--pointer__item higtLight"></i>
            <i class="slider--pointer__item"></i>
            <i class="slider--pointer__item"></i>
            <i class="slider--pointer__item"></i>
        </div>
    </div>
</body>
<script>
    var sliderImages = document.getElementsByClassName("slider--images")[0];
    var sliderContaienr = document.getElementsByClassName("slider--container")[0];
    var sliderPrev = document.getElementsByClassName("slider--prev")[0];
    var sliderNext = document.getElementsByClassName("slider--next")[0];
    var sliderPointerItem = document.getElementsByClassName("slider--pointer__item");
    var  i = 0;
    var timer = null;
    /*图片自动播放函数*/
    function autoPlay() {
        timer = setInterval(function () {
             moveToIndex(sliderImages, i);
            i ++;
        },2000);
    }
    function moveToIndex (dom, index) {
        dom.style.left = -800 * (轮播 % 4) + "px";
        /*图片每改变一个，下面的小圆点就显示高亮*/
        hightLightPointer ();
    }
    function bindEv (dom, type, fn) {
        dom['on' + type] = fn;
    }
    bindEv(sliderContaienr, 'mouseover', stopAutoPlay);
    bindEv(sliderContaienr, 'mouseout', autoPlay);
    bindEv(sliderPrev, 'click', prev);
    bindEv(sliderNext, 'click', next);
    function prev() {
        i --;
        detect();
        moveToIndex(sliderImages, i);
    }
    function next() {
        i ++;
        moveToIndex(sliderImages, i);
    }
    function stopAutoPlay() {
        clearInterval(timer);
    }
    function detect () {
        if(i < 0){
            i = 3;
        }
    }
    function hightLightPointer () {
         for(var j = 0; j < sliderPointerItem.length; j++){
             sliderPointerItem[j].className = 'slider--pointer__item' + (j === (i % 4) ? ' hightLight' : '');
         }
    }
    autoPlay();

</script>
</html>